<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SoNovel - 验证访问</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .auth-container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
            text-align: center;
            animation: slideUp 0.5s ease-out;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .logo {
            margin-bottom: 30px;
        }

        .logo h1 {
            color: #6a11cb;
            font-size: 36px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .logo p {
            color: #7f8c8d;
            margin-top: 5px;
            font-size: 16px;
        }

        .auth-title {
            font-size: 26px;
            margin-bottom: 30px;
            color: #2c3e50;
            font-weight: 600;
        }

        .qr-section {
            margin-bottom: 30px;
            position: relative;
        }

        .qr-code {
            width: 220px;
            height: 220px;
            margin: 0 auto 20px;
            background: #f8f9ff;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #e0e5ff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }

        .qr-code::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background:
                    repeating-linear-gradient(0deg, transparent, transparent 19px, #6a11cb 19px, #6a11cb 20px),
                    repeating-linear-gradient(90deg, transparent, transparent 19px, #6a11cb 19px, #6a11cb 20px);
            background-size: 20px 20px;
            opacity: 0.15;
        }

        .qr-placeholder {
            color: #6a11cb;
            text-align: center;
            z-index: 1;
        }

        .qr-placeholder i {
            font-size: 60px;
            display: block;
            margin-bottom: 15px;
            color: #6a11cb;
        }

        .input-section {
            margin-bottom: 25px;
        }

        .input-group {
            margin-bottom: 20px;
            position: relative;
        }

        input[type="text"] {
            width: 100%;
            padding: 18px 25px;
            border: 2px solid #e1e5eb;
            border-radius: 12px;
            font-size: 18px;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        input[type="text"]:focus {
            border-color: #6a11cb;
            outline: none;
            box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2);
        }

        .btn {
            padding: 18px 35px;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
            width: 100%;
            box-shadow: 0 5px 15px rgba(106, 17, 203, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(106, 17, 203, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        .notification {
            background: #f8f9ff;
            border-left: 4px solid #6a11cb;
            padding: 25px;
            border-radius: 12px;
            margin-top: 30px;
            text-align: left;
        }

        .notification h3 {
            color: #6a11cb;
            margin-bottom: 15px;
            font-size: 20px;
            display: flex;
            align-items: center;
        }

        .notification h3 i {
            margin-right: 12px;
            font-size: 24px;
        }

        .notification p {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .notification ul {
            padding-left: 25px;
            margin-top: 15px;
        }

        .notification li {
            margin-bottom: 10px;
            font-size: 15px;
            line-height: 1.5;
        }

        .hint {
            margin-top: 15px;
            font-size: 16px;
            color: #7f8c8d;
        }

        .error-message {
            color: #e74c3c;
            margin-top: 10px;
            font-size: 15px;
            display: none;
        }

        .footer {
            margin-top: 30px;
            color: #95a5a6;
            font-size: 14px;
        }

        @media (max-width: 576px) {
            .auth-container {
                padding: 25px;
            }

            .logo h1 {
                font-size: 30px;
            }

            .auth-title {
                font-size: 22px;
            }

            .qr-code {
                width: 180px;
                height: 180px;
            }

            input[type="text"] {
                padding: 15px 20px;
                font-size: 16px;
            }

            .btn {
                padding: 16px 25px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
<div class="auth-container">
    <div class="logo">
        <h1>SoNovel</h1>
        <p>您的专属小说阅读平台</p>
    </div>

    <h2 class="auth-title">扫描二维码获取回复【code】获取验证码</h2>

    <div class="qr-section">
        <div class="qr-code">
            <div class="qr-placeholder">
                <img src="code.jpg" height="200" width="200">
            </div>
        </div>
        <p class="hint">使用微信扫描上方二维码</p>
    </div>

    <div class="input-section">
        <div class="input-group">
            <input type="text" id="authCode" placeholder="请输入验证码" autocomplete="off">
        </div>
        <button class="btn" id="verifyBtn">验证并进入</button>
        <div class="error-message" id="errorMsg">验证码错误，请重新输入</div>
    </div>

    <div class="notification">
        <h3><i class="fas fa-info-circle"></i> 为什么需要验证？</h3>
        <p>为了保护您的阅读隐私和确保服务稳定，我们采取了验证措施。扫码验证可以帮助我们：</p>
        <ul>
            <li>防止机器人滥用服务，确保资源合理分配</li>
            <li>确保只有授权用户能够访问内容</li>
            <li>提供更稳定的服务质量，减少服务器压力</li>
            <li>保护您的个人阅读记录和偏好</li>
            <li>遵守相关法律法规的要求</li>
        </ul>
        <p>我们承诺不会收集您的个人隐私信息，验证仅用于服务访问控制。</p>
    </div>

    <div class="footer">
        <p>© 2023 SoNovel - 所有权利保留</p>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const authCodeInput = document.getElementById('authCode');
        const verifyBtn = document.getElementById('verifyBtn');
        const errorMsg = document.getElementById('errorMsg');

        // 静态密码 - 在实际应用中应该更复杂且定期更换
        const STATIC_CODE = "SONOVEL2023";

        verifyBtn.addEventListener('click', function() {
            const enteredCode = authCodeInput.value.trim();

            if (!enteredCode) {
                errorMsg.textContent = '请输入验证码';
                errorMsg.style.display = 'block';
                return;
            }

            if (enteredCode === STATIC_CODE) {
                // 验证成功，跳转到主页面
                window.location.href = 'download.html';
            } else {
                errorMsg.textContent = '验证码错误，请重新输入';
                errorMsg.style.display = 'block';
                authCodeInput.value = '';
                authCodeInput.focus();

                // 添加抖动动画
                authCodeInput.classList.add('shake');
                setTimeout(() => {
                    authCodeInput.classList.remove('shake');
                }, 500);
            }
        });

        // 支持回车键提交
        authCodeInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                verifyBtn.click();
            }
        });

        // 输入时隐藏错误信息
        authCodeInput.addEventListener('input', function() {
            errorMsg.style.display = 'none';
        });
    });
</script>
</body>
</html>
